<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery1.9/jquery-1.9.0.min.js"></script>
    <script src="template.js"></script>
    <script>
        function doSome(){
            let p2=$("#f").serializeArray();
            // $.ajax({
            //     type:"post",
            //     url:"./service/selectProductById.php",
            //     data:p2,
            //     dataType:"json"
            // }).done((data,textStatus,jqXHR) => {
            //     console.log("data:",data);
            // }).fail((jqXHR,textStatus,errorThrown) => {
            //     console.log(jqXHR);
            //     console.log(textStatus);
            //     console.log(errorThrown);
            // });
            $.ajax({
                type:"post",
                url:"./service/selectProductById.php",
                data:p2,
                dataType:"json"
            }).then((data,textStatus,jqXHR) => {
                console.log("data:",data);
            },(jqXHR, textStatus, errorThrown) => {
                console.log(jqXHR);
                console.log(textStatus);
                console.log(errorThrown);
            });
        }

    /******************************************/ 
        window.onload=function(){
            var data = {
                p1:"<span>我是P1</span>",
                p2:"<p>我是P2</p>"
            };
            var data2 ={
                name:"Tom",
                age:18
            };
            var html =template("template111",data);//第一个参数是模板的id
            document.getElementById("mydiv").innerHTML=html;

            var html =template("template112",data2);
            document.getElementById("mydiv2").innerHTML=html;

        }

    </script>
</head>
<body>
    <form id="f">
        <div>
            <label>商品编号<input type="text" name="id" ></label>
        </div>
        <div>
            <label>商品名称<input type="text" name="name" ></label>
        </div>
    </form>
    <input type="button" value="ajax" onclick="doSome()" />
    <br>
    <br>
    <hr>
    <script id="template111" type="text/html">
        <div style="font-size:25px;">
            <p>{{p1}}</p>
            <p>{{p2}}</p>
        </div>
    </script>
    <div id="mydiv">

    </div>

    <script id="template112" type="text/html">
        <div style="font-size:20px;color:blue;">
            <p>{{name}}</p>
            <p>{{age}}</p>
        </div>
    </script>
    <div id="mydiv2">

    </div>
</body>
</html>